<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-08-13 12:46:48
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-08-30 12:57:17
 * @FilePath: \web-components-box\components\Select\index.vue
 * @Description: 选项框
-->
<script setup lang="ts">

interface Option {
  title: String,
  id: String,
  disabled: Boolean 
}
const props = defineProps({
  optionList: { // 选项数据
    type: Array as PropType<Option[]>,
    default: [],
  },
  
})
const emits = defineEmits(['editSuccess', 'search', 'refresh', 'loadMore', 'scroll'])

// 是否显示正在搜索加载中的loading
const loading = ref(false)

// 处理搜索事件
const handleSearchEvent = (searchKey: string) => {
  if (searchKey) {
    loading.value = true
    window.setTimeout(() => {
      optionList.value = [{title: `${searchKey}-Option1`}, {title: `${searchKey}-Option2`}, {title: `${searchKey}-Option3`}]
      loading.value = false;
    }, 2000)
  } else {
    optionList.value = []
  }
}
// 处理选中事件
const handleSelectEvent = (item: any, index: number) => {
  console.log("选中》", item, index)
}
// 滑动至底部处理事件
const handleReachBottom = () => {
  console.log("滑动至底部处理事件")
}
// 选项框滚动事件
const handleScroll = () => {
  console.log("选项框滚动事件")
}
</script>

<template>
  <a-select
    :style="{width:'320px'}"
    default-value="Beijing"
    placeholder="请选择标签"
    :loading="loading"
    :options="[]"
    allow-search
    :multiple="true"
    @search="handleSearchEvent"
    @dropdown-scroll="handleScroll"
    @dropdown-reach-bottom="handleReachBottom"
  >
    <a-option v-for="(item, index) in props.optionList" :value="item?.title" :disabled="((item?.disabled ?? false) as boolean)" @click="handleSelectEvent(item, index)" >
      <CustomOption  prefixIcon="https://img.zcool.cn/community/01d5a75b208cbda80121bbeced28d6.gif">
        <template #prefixIcon>
          <icon-cloud-download />
        </template>
      </CustomOption>
      
    </a-option>
    <template #prefix>
      <icon-cloud-download />
    </template>
    <!-- <template #label>
      <icon-select-all />
    </template> -->
  </a-select>
</template>

